<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 
      v-text
        绑定文本，类似 {{}}
      v-html
        绑定文本，但是会对内容做html解析
      v-show
        控制元素是否显示
      v-if
        控制元素是否渲染
      v-else
      v-else-if
      v-for
        列表渲染
      v-on
        事件绑定
          简写 @
      v-bind
        属性绑定
          简写 :
      v-model
        表单输入绑定
      v-slot
        与组件的相关的插槽内容
      v-pre
        跳过该元素已经子元素的编译。在该指令内写的 {{}} 之类的都会原样输出
      v-once
        只绑定一次,后续数据的变化，不会引起更新
      v-memo
        Vue3.2 新增
        为了做缓存控制，为了性能优化
      v-cloak
        解决 {{}} 的闪烁问题
   -->

    <div id="app">
      <p>{{ raw }}</p>
      <p v-text="raw"></p>
      <p v-html="raw"></p>

      <div v-pre>{{ raw }}</div>

      <pre>
        我的天          我的地

        123
        123
      </pre>

      <hr />
      <div v-once>{{ raw }}</div>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            raw: "<a href='javascript:alert(1)'>点我</a>",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
